<template>
  <div>
    <tree-manage-content :treeData="treeData" :treeOptions="treeOptions"
     @treeEditHandle="treeEditHandle" @nodeHandle="nodeHandle">
      <template slot="headBtnGroup">
        <el-button v-if="isAuth('sys:menu:order')" type="primary" icon="el-icon-sort-up" :size="size" @click="sortHandle(-1)">上移</el-button>
        <el-button v-if="isAuth('sys:menu:order')" type="primary" icon="el-icon-sort-down" :size="size" @click="sortHandle(1)">下移</el-button>
        <el-button v-if="isAuth('sys:menu:save')" type="primary" icon="el-icon-edit" :size="size" @click="saveMenuHandle">添加菜单</el-button>
        <el-button v-if="isAuth('sys:menu:save')" type="primary" icon="el-icon-edit" :size="size" @click="savePermissionHandle">添加权限</el-button>
        <el-button v-if="isAuth('sys:menu:delete')" type="primary" icon="el-icon-delete" :size="size" @click="batchDeletePermissionHandle">删除权限</el-button>
      </template>
      <template slot="mainGroup">
        <table-content ref="table" :tableOptions="tableOptions" :tableSource="tableSource" @selectionChangeHandle="selectionChangeHandle"
         @sortChangeHandle="sortChangeHandle" @pageHandle="pageHandle">
        </table-content>
      </template>
    </tree-manage-content>
    <menu-info ref="menuInfoDialog" :size="this.size" :nodeId="this.treeNode.id" @flush="flush" @flushPermissions="flushPermissions"></menu-info>
  </div>
</template>

<script>
import { getMenuTreeApi, getMenuOrderApi, getMenuPermissionsApi, deleteMenuOrPermissionApi, batchDeleteMenuPermissionsApi } from '@/api/menu'
import TreeManageContent from '@/components/common/tree-manage-content'
import TableContent from '@/components/table/table-content'
import MenuInfo from '@/views/modules/sys/menu-info'
export default {
  components: {
    TreeManageContent,
    TableContent,
    MenuInfo
  },
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      treeData: [],
      treeOptions: {
        children: 'subMenus',
        label: 'name',
        editShow: true,
        headBtnGroupClass: '{ ; line-height: 43px; }',
        headBtnGroupWidth: '43px',
        mainGroupClass: '{ ; padding: 0; }'
      },
      treeNode: {
        id: '0',
        label: '',
        parentId: '0'
      },
      tableOptions: {
        size: this.size,
        highlightCurrentRow: true, // 是否要高亮当前行
        fit: true, // 列的宽度是否自撑开
        mutiSelect: true, // 是否显示选择框
        pagination: true // 是否分页
      },
      tableSource: {
        headers: [
          {
            prop: 'id',
            label: '权限id',
            minWidth: '100px'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            sortable: 'custom',
            formatData: (row, column, columnValue) => {
              return this.$time.formatDate(columnValue, 'yyyy-MM-dd HH:mm:ss')
            }
          },
          { prop: 'createName', label: '创建人' },
          { prop: 'name', label: '权限名' },
          {
            prop: 'system',
            label: '系统标签',
            minWidth: '50px',
            formatData: (row, column, columnValue) => {
              let data = {
                false: '否',
                true: '是'
              }
              return data[columnValue]
            }
          },
          { prop: 'permission', label: '权限' },
          {
            operation: true,
            operations: [
              {
                label: '删除',
                type: 'danger',
                icon: 'el-icon-delete',
                show: true,
                permission: 'sys:menu:delete',
                method: (index, row) => {
                  this.delPermissionHandle(index, row)
                }
              }
            ]
          }
        ],
        data: []
      },
      query: {
        sortField: '',
        sortRule: 1,
        page: 1,
        pageSize: 15
      },
      selections: []
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    getTree() {
      getMenuTreeApi().then(res => {
        this.treeData = res.data
      })
    },
    treeEditHandle(obj) {
      this.$refs.menuInfoDialog.dialogOptions.show = true
      this.$refs.menuInfoDialog.init(2)
    },
    nodeHandle(obj) {
      this.treeNode = obj.backData
      this.getPermissions(this.treeNode.id, this.query)
    },
    sortHandle(target) {
      getMenuOrderApi(this.treeNode.id, target).then(res => {
        this.getTree()
      }).catch(() => {
        this.$message({
          message: '排序失败',
          type: 'error',
          duration: 1500
        })
      })
    },
    saveMenuHandle() {
      this.$refs.menuInfoDialog.dialogOptions.show = true
      this.$refs.menuInfoDialog.init()
      this.$refs.menuInfoDialog.formSource.ruleForm.parentId = this.treeNode.id
    },
    savePermissionHandle() {
      this.$refs.menuInfoDialog.dialogOptions.show = true
      this.$refs.menuInfoDialog.init(1)
      this.$refs.menuInfoDialog.formSource.ruleForm.parentId = this.treeNode.id
    },
    batchDeletePermissionHandle() {
      if (this.selections.length === 0) {
        this.$message({
          message: '请选择数据',
          type: 'warning',
          duration: 1500
        })
        return
      }
      let operationIds = this.selections.map(item => { return item.id })
      if (operationIds.length > 0) {
        batchDeleteMenuPermissionsApi(operationIds).then(res => {
          this.$message({
            message: '批量删除成功',
            type: 'success',
            duration: 1500
          })
          this.getPermissions(this.treeNode.id, this.query)
        }).catch(() => {
          this.$message({
            message: '批量删除失败',
            type: 'error',
            duration: 1500
          })
        })
      }
    },
    getPermissions(menuId, data = {}) {
      getMenuPermissionsApi(menuId, data).then(res => {
        this.tableSource.data = res.data
      })
    },
    selectionChangeHandle(obj) {
      this.selections = obj.backData
    },
    sortChangeHandle(obj) {
      let column = obj.backData
      if (column.order) {
        this.query.sortField = column.prop
        // 倒序
        if (column.order === 'descending') {
          this.query.sortRule = 1
        } else {
          this.query.sortRule = 0
        }
      } else {
        // 不排序
        this.query.sortField = ''
        this.query.sortRule = 0
      }
      this.getPermissions(this.treeNode.id, this.query)
    },
    pageHandle(obj) {
      this.query.page = obj.backData.page
      this.query.pageSize = obj.backData.pageSize
      this.getPermissions(this.treeNode.id, this.query)
    },
    flush() {
      this.getTree(this.query)
    },
    flushPermissions() {
      this.getPermissions(this.treeNode.id, this.query)
    },
    delPermissionHandle(index, row) {
      deleteMenuOrPermissionApi(row.id).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1500
        })
        this.getPermissions(this.treeNode.id, this.query)
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error',
          duration: 1500
        })
      })
    }
  }
}
</script>

<style></style>
